<template>
  <div class="">
    <div style="width: 100%; height: 500px">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
            :columns="columns"
            :data="tableData"
            :width="width"
            :height="height"
            :row-class="tableRowClassName"
            fixed
          />
        </template>
      </el-auto-resizer>
    </div>
    <div style="margin-top: 10px">
      共
      <el-link type="primary" style="font-size: 20px">{{
        tableData.length
      }}</el-link>
      条数据
    </div>
  </div>
</template>

<script setup>
import { ref, h } from 'vue'
import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus'
const tableData = ref([])

const getApiData = () => {
  const mockData = []
  const rowCount = 50 // Number of rows to generate

  for (let i = 1; i <= rowCount; i++) {
    mockData.push({
      id: i,
      name: `User ${i}`,
      id_number: `ID-${Math.floor(Math.random() * 10000)}`,
      department: `Department ${i % 5}`,
      position: `Position ${i % 3}`,
      grade: `Grade ${i % 4}`,
      release_status: Math.random() > 0.5 ? '可发放' : '不可发放',
    })
  }

  tableData.value = mockData
}
getApiData()

const columns = [
  {
    key: 'id',
    dataKey: 'id', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
    title: 'id', //显示在单元格表头的文本
    width: 80, //当前列的宽度，必须设置
    fixed: true, //是否固定列
  },
  {
    key: 'name',
    dataKey: 'name', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填name
    title: '姓名',
    width: 100,
    fixed: true,
  },
  {
    key: 'id_number',
    dataKey: 'id_number',
    title: '证件号码',
    width: 180,
  },
  {
    key: 'department',
    dataKey: 'department',
    title: '部门',
    minWidth: 100,
    width: 110,
  },
  {
    key: 'position',
    dataKey: 'position',
    title: '职位',
    width: 140,
  },
  {
    key: 'grade',
    dataKey: 'grade',
    title: '等级',
    width: 120,
  },
  {
    key: 'release_status',
    dataKey: 'release_status',
    title: '发放状态',
    width: 80,
    cellRenderer: ({ cellData }) =>
      h(
        ElTag,
        { type: cellData == '可发放' ? 'success' : 'danger' },
        { default: () => cellData }
      ),
  },
  {
    key: 'handle',
    title: '操作',
    width: 100,
    align: 'center',
    cellRenderer: data =>
      h(
        ElButton,
        { onClick: () => handleDelete(data), type: 'danger', icon: 'Delete' },
        { default: () => '删除' }
      ),
  },
]
//自定义渲染带状态的表格（每隔一行显示不同的背景色）
const tableRowClassName = ({ rowIndex }) => {
  let step = 4
  for (let i in tableData.value) {
    if (rowIndex === step * i - 3) {
      return 'warning-row'
    }
    if (rowIndex === step * i - 1) {
      return 'success-row'
    }
  }
  return ''
}
//删除操作
const handleDelete = data => {
  ElMessageBox.confirm(`确定删除 ${data.rowData.name}?`, '提 示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      tableData.value.splice(data.rowIndex, 1)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>
